<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>房间选择</title>
<link rel="stylesheet" href="layuiadmin/layui/css/layui.css" media="all">

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
.bg {
	width: 60px;
	height: 60px;
	background:-webkit-linear-gradient(top, lawngreen, greenyellow, green); 
	border: 5px;
}
tr td {
	padding: 15px;
}
.roomtype {

	display: none;
}

.roomno {
	position: relative;
	margin-left: 15px;
	margin-top: 20px;
	font-size: 20px;
}
.roomsalary {
	position: relative;
	margin-left: 10px;
	margin-top: 15px;
	font-size: 15px;
	color: white;
}
</style>
</head>
<body>
<!-- 接收时间段的隐藏窗口 -->
<div id="">
入住时间：<span id="orderstartdate">${orderstartdate}</span>  &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;退房时间：<span id="orderenedate">${orderenedate}</span> <span id="empid" style="display: none;">${employee.empid}</span>
</div>
<!-- 弹窗 -->
<div id="bookornow" style="display: none">
		<form class="layui-form" action="" lay-filter="example">
		<div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">房间号</label>
      <div class="layui-input-inline">
        <input type="text" name="roomno" id="roomno"   autocomplete="off" class="layui-input" readonly="readonly">
      </div>
    </div>
   <div class="layui-inline">
      <label class="layui-form-label">房型</label>
      <div class="layui-input-inline">
        <input type="text" name="roomtype" id="roomtype"   autocomplete="off" class="layui-input" readonly="readonly">
      </div>
    </div>
  
    <div class="layui-inline">
      <label class="layui-form-label">经办人员</label>
      <div class="layui-input-inline">
        <input type="text" name="empname" id="empname"   autocomplete="off" class="layui-input" readonly="readonly" value="${employee.empname}">
      </div>
    </div>
  </div>
    <div class="layui-form-item">
				<label class="layui-form-label">入住人员</label>
				<div class="layui-input-block">
					<input type="text" name="username" id="username" lay-verify="title"
						autocomplete="off" placeholder="" class="layui-input" >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block">
					<input type="radio" name="usersex" value="男" title="男" checked="">
					<input type="radio" name="usersex" value="女" title="女">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">联系电话</label>
				<div class="layui-input-block">
					<input type="text" name="usertel" id="usertel" lay-verify="title"
						autocomplete="off" placeholder="" class="layui-input">
				</div>
			</div>
			
  <div class="layui-inline">
      <label class="layui-form-label">入住时间</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="orderstartdate" name="orderstartdate" placeholder="yyyy-MM-dd" readonly="readonly" value="${orderstartdate}">
      </div>
    </div>
       <div class="layui-inline">
      <label class="layui-form-label">退房时间</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="orderenedate" name="orderenedate" placeholder="yyyy-MM-dd" readonly="readonly" value="${orderenedate}">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">消费总额</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="salary" name="salary">
      </div>
    </div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit="" lay-filter="booknow">预定</button>
				</div>
			</div>
		</form>
	</div>
	
	
<table border="0" cellspacing="0" cellpadding="-10px">
<h2>单人间</h2>
<tr>
<c:forEach items="${list1}" var="e">
<td>
<div class="bg">
<div class="roomtype">${e.roomtype}</div>
<div class="roomno">${e.roomno}</div>
<div class="roomsalary">￥${e.roomsalary}</div>
</div>
</td>
</c:forEach>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="-10px">
<h2>双人间</h2>
<tr>
<c:forEach items="${list2}" var="e">
<td>
<div class="bg">
<div class="roomtype">${e.roomtype}</div>
<div class="roomno">${e.roomno}</div>
<div class="roomsalary">￥${e.roomsalary}</div>
</div>
</td>
</c:forEach>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="-10px">
<h2>三人间</h2>
<tr>
<c:forEach items="${list3}" var="e">
<td>
<div class="bg">
<div class="roomtype">${e.roomtype}</div>
<div class="roomno">${e.roomno}</div>
<div class="roomsalary">￥${e.roomsalary}</div>
</div>
</td>
</c:forEach>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="-10px">
<h2>总统套房</h2>
<tr>
<c:forEach items="${list0}" var="e">
<td>
<div class="bg">
<div class="roomtype">${e.roomtype}</div>
<div class="roomno">${e.roomno}</div>
<div class="roomsalary">￥${e.roomsalary}</div>
</div>
</td>
</c:forEach>
</tr>
</table>

<button class="layui-btn layui-btn-radius" id="fanhui">返回</button>
<script src="layuiadmin/layui/layui.js" charset="utf-8"></script>	
<script type="text/javascript">

layui.use(['layer','form'], function(){ 
	var layer = layui.layer
	,form = layui.form;
	//点击房间时，显示隐藏的窗口
	$(document).ready(function my() {
		 
	$(".bg").each(function(){
	$(this).click(function() {
		//计算时间差，得到入住的天数
		var time1=Date.parse(new Date($("#orderstartdate").html()));
		var time2 = Date.parse(new Date($("#orderenedate").html()));
	    var nDays = Math.abs(parseInt((time2 - time1)/1000/3600/24));
		$("#roomno").attr("value", $(this).children(".roomno").text());
		$("#roomtype").attr("value", $(this).children(".roomtype").text());
		$("#salary").attr("value", nDays*($(this).children(".roomsalary").text().replace("￥","")));
		var index1 = layer.open({
			title:"预定或者入住",
			type : 1,
			skin:'layui-layer-rim',
			content : $("#bookornow"),
		});
		//只有加了这一句，表单的复选框，单选框才可以编辑
		layui.form.render();
		//监听提交
		layui.form.on('submit(booknow)', function(data) {
			var d = data.field;
			if(d.username=="" || d.usertel==""){
				layer.alert("用户名或电话号码不能为空")
			}else{
			var order={
					"roomno":d.roomno,
					"username":d.username,
					"empname":d.empname,
					"usersex":d.usersex,
					"usertel":d.usertel,
					"orderstartdate":d.orderstartdate,
					"orderenedate":d.orderenedate,
					"empid":$("#empid").html(),
					"salary":d.salary
					
			};
			window.localStorage.setItem('order',JSON.stringify(order));
			
			location.href="${pageContext.request.contextPath}/index.jsp";
			}
			/* $.ajax({
				type : "get",
				url : "adminbookornow",
				data : {
					"roomno":d.roomno,
					"username":d.username,
					"empname":d.empname,
					"usersex":d.usersex,
					"usertel":d.usertel,
					"orderstartdate":d.orderstartdate,
					"orderenedate":d.orderenedate,
					"empid":$("#empid").html()
				},
				success : function(data) {
					if (data.msg == "预定成功") {
						layer.msg(data.msg, {
							time : 1000
						}, function() {
							layer.close(index1);
							location.reload();  
						});

					} else {
						layer.msg(data.msg);
					}
				}
			}); */

			return false;
		});
	
    
      
      
      
      
	});
});
	
	
	$("#fanhui").click(function() {
		window.location.href="book";
	});
	});

});
</script>

</body>
</html>